<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;">
            <div style="padding: 15px;background-color: white;">
                <v-table height="80vh" fixed-header>
                    <thead style="background-color: white;">
                        <tr>
                            <td v-for="header in headers" :key="header">
                                {{ header }}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(course, index) in courses" :key="index" style="font-size: small;">
                            <td>{{ course.index }}</td>
                            <td>{{ course.name }}</td>
                            <td>{{ course.type === 0 ? '必修' : course.type === 1 ? '限选' : '任选' }}</td>
                            <td>{{ course.academy }}</td>
                            <td>{{ course.teacher }}</td>
                            <td>{{ course.credit }}</td>
                            <td>{{ course.location }}</td>
                            <td>{{ course.formatTime }}</td>
                            <td>
                                <a class="action" @click="dropCourse(course.id)">
                                    退选
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </v-table>
            </div>
        </div>
    </v-layout>
</template>
<script setup lang="ts">
import type { Course } from '@/models/course';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useCourseStore } from '@/stores';
import { GetMergedCourseSchedule, DropCourse } from '@/controllers/courseController'
import { message, messageConfirm } from '@/utils/message';
const headers = ['课序号', '课程名称', '课程类别', '开课学院', '授课教师', '学分', '授课地点', '开课时间', '操作']
let courses = ref([] as Course[])
let isLoading = ref(true)
onMounted(() => {
    getMergedCourseSchedule()
})

async function getMergedCourseSchedule() {
    try {
        courses.value = await GetMergedCourseSchedule()
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}

async function dropCourse(id: number) {
    try {
        if (await messageConfirm('确认退选当前课程吗')) {
            await DropCourse(id)
            useCourseStore().refreshCourseData()
            getMergedCourseSchedule().then(
                () => {
                    message('退选成功!', 'success')
                }
            )
        }
    }
    catch (error: any) {
        return
    }
}
</script>
<style scoped>
.action {
    font-size: 12px;
    color: rgb(0, 89, 255);
    user-select: none;
    cursor: pointer;
    text-decoration: underline;
}
</style>